<template>
    <div class="Footer">
        <van-tabbar v-model="active" active-color="rgb(2, 182, 253)" route safe-area-inset-bottom>
            <van-tabbar-item to="/home">
                <span>首页</span>
                <template #icon="props">
                    <img :src="props.active ? icon.home.active : icon.home.inactive" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/order">
                <span>订单</span>
                <template #icon="props">
                    <img :src="props.active ? icon.order.active : icon.order.inactive" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/myCenter">
                <span>我的</span>
                <template #icon="props">
                    <img :src="props.active ? icon.myCenter.active : icon.myCenter.inactive" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name:'Footer',
  setup() {
    const active = ref(0);
    const icon = {
      home:{
        active: 'https://gw.alicdn.com/imgextra/i4/O1CN01mjuUty294SnxayJFo_!!6000000008014-2-tps-60-60.png',
        inactive:'https://gw.alicdn.com/imgextra/i2/O1CN01Ha8S2d20YqXK6PTsj_!!6000000006862-2-tps-60-60.png',
      },
      order:{
        active: 'https://gw.alicdn.com/imgextra/i1/O1CN01iKM20L1qbv2M58c8m_!!6000000005515-2-tps-60-60.png',
        inactive:'https://gw.alicdn.com/imgextra/i1/O1CN01VLnmhL1lrslLwg40n_!!6000000004873-2-tps-60-60.png',
      },
      myCenter:{
        active: 'https://gw.alicdn.com/imgextra/i2/O1CN01OCKkCF24I8Y1skoy3_!!6000000007367-2-tps-60-60.png',
        inactive:'https://gw.alicdn.com/imgextra/i4/O1CN01YPwarQ1VVPTfvzwtI_!!6000000002658-2-tps-60-60.png',
      },
    };
    return {
      icon,
      active,
    };
  },
};

</script>

<style>
/* 添加这段样式后，Primary Button 会变成红色 */
:root {
    --van-tabbar-height: 63px;
}
.Footer .van-tabbar--fixed{
  z-index: 100;
}
.Footer .van-tabbar-item__icon img{
    width: 28px;
    height: 28px;
}
</style>